<template>
  <div class="game-menu">
    <!-- <div class="user-info">
      <div class="user-avatar">{{userInfo.cname}}</div>
      <div class="user-name">{{userInfo.username}}将军</div>
    </div> -->
    <div></div>
    <div class="menu-container">
      <div class="menu-item disabled"  @click="startSinglePlayer">
        <div class="menu-icon">⚔️</div>
        <div class="menu-text">单人模式</div>
        <div class="menu-subtext">挑战AI对手</div>
        <div class="menu-subtext">待开发</div>
      </div>

      <div class="menu-item" @click="startMultiPlayer">
        <div class="menu-icon">👥</div>
        <div class="menu-text">双人模式</div>
        <div class="menu-subtext">本地对战</div>
      </div>

      <div class="menu-item" @click="startMatch">
        <div class="menu-icon">🌐</div>
        <div class="menu-text">匹配对战</div>
        <div class="menu-subtext">在线匹配玩家</div>
      </div>

      <div class="menu-item disabled">
        <div class="menu-icon">📜</div>
        <div class="menu-text">对战记录</div>
        <div class="menu-subtext">待开发</div>
      </div>

      <div class="menu-item disabled">
        <div class="menu-icon">👑</div>
        <div class="menu-text">人物集</div>
        <div class="menu-subtext">待开发</div>
      </div>

      <div class="menu-item disabled">
        <div class="menu-icon">🎭</div>
        <div class="menu-text">模式设定</div>
        <div class="menu-subtext">待开发</div>
      </div>

      <div class="menu-item" @click="logout">
        <div class="menu-icon">🚪</div>
        <div class="menu-text">退出登录</div>
        <div class="menu-subtext">返回登录页面</div>
      </div>
    </div>

    <div class="version-info">版本 0.0.1 | 三国模拟战</div>
  </div>
</template>

<script>
import router from "@/router";
import { ref, reactive } from "vue";

export default {
  name: "GameMenu",
  mounted() {
    this.initData();
  },
  setup() {
    const userInfo = reactive({
      username: "",
      cname: "",
    });

    function startSinglePlayer() {
      // 这里可以添加跳转到单人模式页面的逻辑
    }

    function startMultiPlayer() {
      router.push({
        path:"/game-srmode"
      });
    }

    function startMatch() {
      alert("开始匹配对战");
      // 这里可以添加匹配对战的逻辑
    }
    function logout() {
      if (confirm("确定要退出登录吗？")) {
        sessionStorage.removeItem("token");
        sessionStorage.removeItem("userInfo");
        router.push({
          path: "/login",
        });
        // 这里可以添加退出登录的逻辑
      }
    }

    function initData(){
      let dataIofo = sessionStorage.getItem('userInfo');
      console.log(dataIofo);
      
      if (dataIofo) {
        dataIofo = JSON.parse(dataIofo);
        userInfo.username = dataIofo.userName;
        userInfo.cname = dataIofo.userName.slice(0,1);
      }
    }

    return {
      userInfo,
      startSinglePlayer,
      startMultiPlayer,
      startMatch,
      logout,
      initData
    };
  },
};
</script>

<style scoped>
.game-menu {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  overflow: hidden;
  padding: 20px;
}

.user-info {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  padding: 10px 15px;
  border-radius: 30px;
  border: 1px solid #e0e0e0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  z-index: 10;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #333;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.2rem;
}

.user-name {
  color: #333;
  font-size: 1.1rem;
  font-weight: 500;
}

.menu-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
  max-width: 800px;
  width: 100%;
  margin-top: 60px;
}

.menu-item {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 25px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.menu-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border-color: #d0d0d0;
}

.menu-item:active {
  transform: translateY(0);
}

.menu-item.disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.menu-item.disabled:hover {
  transform: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.menu-icon {
  font-size: 3.5rem;
  margin-bottom: 20px;
  color: #333;
}

.menu-text {
  font-size: 1.5rem;
  color: #222;
  font-weight: 600;
  margin-bottom: 10px;
}

.menu-subtext {
  font-size: 0.9rem;
  color: #666;
  font-style: italic;
}

.version-info {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: #888;
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  .menu-container {
    grid-template-columns: 1fr;
    max-width: 500px;
  }

  .menu-item {
    padding: 20px;
  }
}

@media (max-width: 480px) {
  .menu-icon {
    font-size: 2.5rem;
  }

  .menu-text {
    font-size: 1.2rem;
  }

  .user-info {
    top: 10px;
    right: 10px;
    padding: 8px 12px;
  }

  .user-avatar {
    width: 30px;
    height: 30px;
    font-size: 1rem;
  }

  .user-name {
    font-size: 0.9rem;
  }
}
</style>
